import { StyleSheet, Dimensions } from 'react-native'

export const { width, height } = Dimensions.get('window')

export const horizontal = {
    xxSmall: width * 0.0125,
    xSmall: width * 0.025,
    small: width * 0.0375,
    medium: width * 0.05,
    large: width * 0.075,
}

export const vertical = {
    xxSmall: height * 0.0125,
    xSmall: height * 0.025,
    small: height * 0.0375,
    medium: height * 0.05,
    normal: height * 0.065,
    large: height * 0.075,
}

export const colors = {
    white: '#FFFFFF',
    gray: 'gray',
    // primary: 'rgb(90, 170, 200)',
    primaryDark: 'rgb(15, 45, 90)',
    // primaryLight: 'rgb(45, 120, 210)',
    black: '#000000',
}

export const styles = StyleSheet.create({
    paginationContainer: {
        position: 'absolute',
        flexDirection: 'row',
        marginVertical: vertical.xxSmall,
        justifyContent: 'center',
        bottom: 0,
        left: width * 0.25,
        right: width * 0.25
    },
    pagination: {
        width: horizontal.small,
        height: horizontal.small,
        backgroundColor: colors.gray,
        borderRadius: 25,
        marginHorizontal: horizontal.xSmall
    },
    paginationActive: {
        backgroundColor: colors.primaryDark
    },
    container: {
        backgroundColor: 'transparent',
        position: 'relative',
        flex: 1
    },

    wrapperIOS: {
        backgroundColor: 'transparent',
    },

    wrapperAndroid: {
        backgroundColor: 'transparent',
        flex: 1
    },

    slide: {
        backgroundColor: 'transparent',
    },

    pagination_x: {
        position: 'absolute',
        bottom: 25,
        left: 0,
        right: 0,
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent'
    },

    pagination_y: {
        position: 'absolute',
        right: 15,
        top: 0,
        bottom: 0,
        flexDirection: 'column',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent'
    },

    title: {
        height: 30,
        justifyContent: 'center',
        position: 'absolute',
        paddingLeft: 10,
        bottom: -30,
        left: 0,
        flexWrap: 'nowrap',
        width: 250,
        backgroundColor: 'transparent'
    },

    buttonWrapper: {
        backgroundColor: 'transparent',
        flexDirection: 'row',
        position: 'absolute',
        top: 0,
        left: 0,
        flex: 1,
        paddingHorizontal: 10,
        paddingVertical: 10,
        justifyContent: 'space-between',
        alignItems: 'center'
    },

    buttonText: {
        fontSize: 50,
        color: '#007aff',
        fontFamily: 'Arial'
    }
})

